/**
 * Created by Eric on 2017/12/11.
 *
 * 表格组件
 *      此组件必须引用bootstrap.css\jquery\font-awesome\summernote

 *  参数说明:
 *          @param {String} upLoadUrl  图片上传接口地址
 *          @param {String} content  获取编辑器内容
 *          @param {Integer} minHeight 编辑器最低高度
 *  使用方式:
 *      ex:<bg-editor
                :minHeight="300"
                :uploadUrl="uploadApi"
                :content="getApi"
                @editorData='editorInfo'>
            </bg-editor>
 *       @editorData 取得编辑器内容
 *
 *
 */
<template>
  <div class="editor-wrap"  :style="minHeight ? 'height:' + minHeight + 'px;': ''" >
    <div id="summernote" style="background-color: #ccc !important"></div>
  </div>
</template>
<script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import $ from "jquery"; //引入jq

export default {
  data() {
    return {};
  },
  props: {
    uploadUrl: String,
    minHeight: {
      type: Number,
      default: 300,
    },
    content: {
      type: String,
      default: "",
    },
    backgroundColor: {
      type: String,
      // default: "#32303a",      
      default: "#fff",
    },
    maxHeight: {
      type: Number,
      default: 260,
    },
  },
  watch: {},
  mounted() {
    
    setTimeout(() => {
      var obj = document.getElementsByName("file");
      for (let i = 0; i < obj.length; i++) {
        obj[i].style.display = "none";
      }
    }, 200);
    
    var _this = this;

    //延迟覆盖样式
    setTimeout(() => {
      var oStyle = document.createElement("style");
      oStyle.innerHTML = `
        .modal-backdrop { display: none;}
        .note-editable {
          background-color: ${_this.backgroundColor} !important;
          color: #f9e7d8;
        }
      `;
      // $('.note-editable').css('background-color', _this.backgroundColor);
      document.body.append(oStyle);
    }, 500);

    // //高度限制
    // if (this.maxHeight) {
    //   $(".editor-wrap").prop("style", `height: ${this.maxHeight}px; `);
    // }

    setTimeout(() => {
      $("#summernote").summernote("code", this.content);
    }, 300);
    $("#summernote").summernote({
      toolbar: [
        // [groupName, [list of button]]
        ["style", ["bold", "italic", "underline", "clear"]],
        ["font", ["strikethrough", "superscript", "subscript"]],
        ["fontsize", ["fontsize"]],
        ["color", ["color"]],
        ["para", ["ul", "ol", "paragraph"]],
        ["height", ["height"]],
        ["picture", ["picture"]],
        ["table", ["table"]],
        // ['fullscreen',['fullscreen']]
      ],
      lang: "zh-CN",
      minHeight: this.minHeight, // set editor height
      dialogsFade: true,
      callbacks: {
        onImageUpload: function (files) {
          console.log("上传图片", files);
          //图片文件上传
          let zipFormData = new FormData();
          let url = this.uploadUrl || API.common.upload;
          console.log(this.uploadUrl)
          zipFormData.append("file", files[0]);

          _this.tools.post(
            url,
            zipFormData,
            null,
            (res) => {
              console.log("结果", res);
              if (res.code == "200") {
                console.log(res.data.fullUrl);
                let imgNode = res.data.fullUrl;
                console.log("imgNode", imgNode);
                $("#summernote").summernote("editor.insertImage", imgNode);
              } else {
                this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );

          // this.$http
          //   .post(url, zipFormData)
          //   .then(
          //     function (response) {
          //       console.log(response.data.data);
          //       let imgNode = response.data.data.fullUrl;
          //       console.log("imgNode", imgNode);
          //       $("#summernote").summernote("editor.insertImage", imgNode);
          //     },
          //     function (err) {
          //       console.log(err);
          //     }
          //   )
          //   .then((text) => {
          //     console.log(text);
          //   });

          //其他
          // let file = files[0];
          // let param = {
          //     // suffix:file.name.split(".")[1],   // 文件后缀  png
          //     // contentType:file.type             // 文件类型  image/png
          // }
          // common.requestAjax(url,param,null,(res)=> {
          //     let upLoadUrl = res.data.bussData.uploadUrl;
          //     let downloadUrl =   res.data.bussData.downloadUrl;
          //     common.uploadFile(upLoadUrl,file,file.type,(res)=>{
          // $('#summernote').summernote('editor.insertImage', downloadUrl);
          //     })
          // });
        },
        onChange: (contents, $editable) => {
          this.$emit("editorData", contents);
        },
      },
      content(item) {},
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
// @import "./bootstrap.css"; //引入样式文件

@import "/static/bootstrap.css";
@import "/sdhAdmin/static/bootstrap.css";

.editor-wrap {
  min-height: 300px;
  overflow-y: auto !important;
}
</style>
